<template>
  <div>
    <div>
          <!-- <div style="width: 65%;float: right;"> -->
          <div class="mod-config">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <el-form-item><el-input v-model="dataForm.key" placeholder="会员卡号/身份证号/电话" clearable></el-input></el-form-item>
              <el-form-item>
                <el-button @click="getDataList(dataForm.memberTypeId)">查询</el-button>
<!--                <el-button v-if="isAuth('store:tstoremember:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
<!--                <el-button v-if="isAuth('store:tstoremember:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
              </el-form-item>
            </el-form>
            <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
              <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
              <el-table-column prop="memberNick" header-align="center" align="center" label="会员昵称"></el-table-column>
              <el-table-column prop="memberCardNo" header-align="center" align="center" label="会员卡号"></el-table-column>
              <el-table-column prop="idCard" header-align="center" align="center" label="身份证号"></el-table-column>
              <el-table-column prop="memberName" header-align="center" align="center" label="会员姓名"></el-table-column>
              <el-table-column prop="sex" header-align="center" align="center" label="性别">
                <template slot-scope="scope">
                  <el-tag type="success" v-show="scope.row.sex === 1">男</el-tag>
                  <el-tag type="danger" v-show="scope.row.sex === 2">女</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="address" header-align="center" align="center" label="家庭住址"></el-table-column>
              <el-table-column prop="tel" header-align="center" align="center" label="会员电话"></el-table-column>
              <el-table-column prop="birthday" header-align="center" align="center" label="生日"></el-table-column>
              <el-table-column prop="status" header-align="center" align="center" label="卡状态">
                <template slot-scope="scope">
                  <el-tag type="success" v-show="scope.row.status === 1">正常</el-tag>
                  <el-tag type="danger" v-show="scope.row.status === 2">冻结</el-tag>
                  <el-tag type="warning" v-show="scope.row.status === 3">退卡</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
              <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">

                  <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
          </div>
    </div>

    <!-- 销售人员 -->
    <el-dialog center title="选择销售人员" :visible.sync="salemanVisile" width="65%" append-to-body>
      <el-checkbox-group v-model="dataForm.salemanList">
        <el-row :gutter="20">
          <el-col :span="8" v-for="sale in salemanList" :key="sale.staffId">
            <el-card  >
              <el-checkbox   :label="sale.staffId">
                <div>姓名:{{sale.staffName}}</div>
                <div>电话:{{sale.staffTel}}</div>
                <div>性别:{{sale.staffSex === 1?'男':'女'}}</div>
              </el-checkbox>
            </el-card>
            <br>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="getSaleMans()">确定</el-button>
			</span>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog center title="会员详细" :visible.sync="memberInfoVisile" width="60%" append-to-body>
      <el-tabs v-model="memberDetailActiveName" @tab-click="memberDetalHandleClick">
        <el-tab-pane name="memberDetail"  label="详细信息">
          <MemberDetail ref="memberDetail"></MemberDetail>
        </el-tab-pane>
        <el-tab-pane name="consumeRecord" label="消费记录">
          <member-consume-recod ref="consumeRecordRef"></member-consume-recod>
        </el-tab-pane>
        <el-tab-pane name="RechargeRecord" label="充值记录">
          <member-recharge-record ref="memberRechargeRecordRef"></member-recharge-record>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 会员充值 -->
    <el-dialog center title="会员充值" :visible.sync="memberRechargeVisile" width="80%" append-to-body>
      <MemberRecharge ref="memberRecharge"></MemberRecharge>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './member-add-or-update';
import MemberType from './membertype.vue';
import MemberDetail from './detail/memberdetail.vue'
import MemberRecharge from './recharge/memberRecharge.vue'
import MemberRule from './configuration/tstorememberrule.vue'
import MemberConsumeRecod from './consume/tstorememberconsumerecord.vue'
import MemberRechargeRecord from './recharge/tstorememberrechargerecord.vue'
export default {
  data() {
    return {
      memberTypeList:[],
      activeName: 'first',
      memberDetailActiveName:"memberDetail",
      memberInfoVisile: false,
      memberRechargeVisile:false,
      dataForm: {
        key: '',
        memberTypeId:null
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      salemanVisile:false,
      memberId:''
    };
  },
  components: {
    AddOrUpdate,
    MemberType,
    MemberDetail,
    MemberRecharge,
    MemberRule,
    MemberConsumeRecod,
    MemberRechargeRecord,
  },
  created() {
    this.getDataList(id);
  },
  methods: {
    memberDetalHandleClick(tab, event){
      if(tab.name === 'memberDetail'){
        this.memberInfo()
      }
      if(tab.name === 'consumeRecord'){
        this.$nextTick(() => {
          this.$refs.consumeRecordRef.getDataList(this.memberId)
        })
      }
      if(tab.name === 'RechargeRecord'){
        this.$nextTick(() => {
          this.$refs.memberRechargeRecordRef.init(this.memberId)
        })
      }
    },

    handleClick(tab, event) {
      if(tab.name === 'first'){
        this.getDataList();
      }
      if(tab.name === 'recharge'){
        this.$nextTick(() => {
          this.$refs.memberRecharge.init();
        });
      }
      if(tab.name === 'second'){
        this.$nextTick(() => {
          this.$refs.MemberTypeRef.getDataList();
        });
      }
      if(tab.name === 'third'){
        this.$nextTick(() => {
          this.$refs.MemberRuleRef.getDataList();
        });
      }
    },


    //会员详情
    memberInfo(id) {
      this.memberId = id
      this.memberInfoVisile = true
      this.$nextTick(() => {
        this.$refs.memberDetail.init(id);
      });
    },

    // 获取数据列表
    getDataList(id) {
      this.dataForm.memberTypeId = id || null;
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/store/tstoremember/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          memberTypeId: this.dataForm.memberTypeId
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.id;
        });
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/store/tstoremember/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList(this.dataForm.memberTypeId);
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
